<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
    	<div id="app">
    		 <el-tree v-loading="loading" style="width: 400px;"
              ref="tree"
              :props="defaultProps"
              :load="loadNode"
              :data="items"
              node-key="id"
              :expand-on-click-node="false"
              lazy
              :check-strictly="true"
              @check-change="checkChange"
              show-checkbox>
            </el-tree>
    	</div>
	</body>
  	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script type="text/javascript">
		new Vue({
      		el: '#app',
	      	data() {
                return {
                    defaultProps: {
                        label: 'name',
                        children: 'zones',
                        isLeaf: 'leaf'
                    },
                    items: [],
                    loading: true,
                    selecte: {},
                    count: 1,
                }
            },
            created:function(){
                // 一开始模拟获取数据，使v-loading=true,获取数据之后再把v-loading复制为false
               setTimeout(() => {
                 this.getChildren(0);
               }, 2000);
            },
            methods: {
                loadNode(node, resolve){
                    // 加载树节点
                    console.log(node);
                    if (node.level === 0) {
                        return resolve(this.items);
                    }

                    if (node.level >= 1) {
                        if(!node.data.leaf){
                            // 非叶子节点
                            this.getChildren(node.data.id, resolve);
                        }else{
                            return resolve([]);
                        }
                    }
                },
                getChildren(id, resolve){
                    // 根据获取孩子节点
                    let data;
                    // 模拟 Ajax 请求
                    if(id == 0){
                        respone = [{ 
                            name: 'region1',
                            id: 1,
                            leaf: false,
                        }, {
                            name: 'region2',
                            id: 2,
                            leaf: true,
                        }];
                        this.items = respone;
                    	this.loading = false;
                    }else{
                        let hasChild = Math.random() > 0.5;

                        if (hasChild) {
                        data = [{
                            name: 'zone' + this.count++,
                            id: this.count+1
                        }, {
                            name: 'zone' + this.count++,
                            id: this.count+1
                        }];
                        } else {
                            data = [];
                        }
                    }
                    setTimeout(() => {
                        return resolve && resolve(data);
                    }, 500);
                    
                },
                checkChange(data, checked, indeterminate) {
                    // 实现单选
                	console.log(data);
                    if(checked){
                    	// 当前点击为选择状态而不是取消选择
                        this.selected = data;
                    }
                    // 获取当前所有被选中节点的id所组成的数组
                    let nodes = this.$refs.tree.getCheckedKeys();
                    if(nodes.length == 0 || nodes.length == 1) return;
                    // 注意传入的参数是数组
                    this.$refs.tree.setCheckedKeys([data.id]);
                },
            }
	    })
	</script>
</html>
